<script setup lang="ts">
import type { CheckHealthPackageRespVO } from '@/api/check-health-package';
import { ref } from 'vue';
import { CheckHealthPackageApi } from '@/api/check-health-package';
import { useRequest } from '@/hooks/useRequest';
import { buildAssetSource } from '@/utils';

const emit = defineEmits(['close']);

const show = ref(false);

function handleClose() {
  show.value = false;
  emit('close');
}

const selectPlan = ref<CheckHealthPackageRespVO>();

// 获取套餐详情
const {
  data: packageDetail,
  runAsync: getPackageDetail
} = useRequest(() => CheckHealthPackageApi.getPackageDetail(selectPlan.value.id), {
  manual: true
});

defineExpose({
  onOpen(plan: CheckHealthPackageRespVO) {
    selectPlan.value = plan;
    getPackageDetail();
    show.value = true;
  },
  onClose() {
    handleClose();
  }
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          完整项目列表
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <view v-for="item in packageDetail?.checkItemFees" :key="item.id" class="examination-item">
          <wd-icon name="check-circle-filled" /> {{ item.itemName }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }
    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }
    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 20px;
    margin-top: 20px;
    max-height: 800px;
    overflow: auto;

    .examination-item {
      color: #333333;
      font-size: 32px;
      margin-top: 12px;
      padding-left: 44px;

      :deep(.wd-icon) {
        color: var(--primary);
        font-size: 32px;
        margin-right: 14px;
      }
    }
  }
}
</style>
